<template>
  <div class="app-container">
    <el-card class="box-card">
      <section>
        <div slot="header" class="mb-4">
          <el-form :model="listQuery2" inline>
            <el-form-item label="时间">
              <el-date-picker
                v-model="listQuery2.start_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择开始时间"
              >
              </el-date-picker>
              <el-date-picker
                v-model="listQuery2.end_time"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="请选择结束时间"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="getPoolStatistics"
                :loading="loading"
                >搜索
              </el-button>
              <el-button
                type="primary"
                @click="handleReset2"
                :loading="loading"
                >重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="mb-4 flex">
          <p class="mr-4">
            <span>用户投入 ：</span>
            <span>{{ userInput}} M豆</span>
          </p>
          <p class="mr-4">
            <span>用户产出： </span>
            <span>{{ userOutinput }} M豆</span>
          </p>
          <p class="mr-4">
            <span>投产比：</span>
            <span>{{ userRatio }} %</span>
          </p>
          <p class="mr-4">
            <span>单抽次数：</span>
            <span>{{ singleDraws }}</span>
          </p>
          <p class="mr-4">
            <span>十抽次数：</span>
            <span>{{ tenDraws }}</span>
          </p>
          <p class="mr-4">
            <span>百抽次数：</span>
            <span>{{ hundredDraws }}</span>
          </p>
          <p class="mr-4">
            <span>总产出：</span>
            <span>{{ all_price }}</span>
          </p>
          <p class="mr-4">
            <span>总投产比：</span>
            <span>{{ all_proportion }}%</span>
          </p>
        </div>
      </section>
      <div class="clearfix flex">
        <div class="mr-4">
          <el-button type="primary" size="default" @click="handleTime('今天')">今天</el-button>
          <el-button type="primary" size="default" @click="handleTime('本周')">本周</el-button>
          <el-button type="primary" size="default" @click="handleTime('本月')">本月</el-button>
        </div>
        <el-form :model="listQuery" inline>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="listQuery.start_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始时间"
            >
            </el-date-picker>
            <el-date-picker
              v-model="listQuery.end_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="用户编号">
            <el-input v-model="listQuery.user_code" placeholder="请输入用户编号" size="normal" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getStatistic"
              :loading="loading"
              >搜索
            </el-button>
            <el-button
              type="primary"
              @click="handleReset"
              :loading="loading"
              >重置
            </el-button>
            <el-button type="primary" @click="deBounceWrap(handleExcel)"
              >导出</el-button
            >
            
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border>
        <el-table-column label="用户ID" prop="user.user_id"></el-table-column>
        <el-table-column label="用户昵称" prop="user.nickname"></el-table-column>
        <el-table-column label="用户编号" prop="user.user_code"></el-table-column>
        <el-table-column label="抽奖次数" prop="count"></el-table-column>
        <el-table-column label="获得奖励" prop="" width="400px">
          <template slot-scope="{row}">
            
            <el-popover
              placement="left"
              width="400"
              trigger="hover">
                <div v-for="item in row.detail" :key="item.id" class="flex mb-4">
                  <span>{{ item.reward_type === 'gift' ? '礼物奖励：' : item.reward_type === 'debris' ? '碎片奖励：' : '装扮奖励：' }}</span>
                  <div>{{ item.title }} {{ item.reward_type === 'product' ? '* ' + item.count+'天' : '' }} * {{ item.draw_count }}</div>
                </div>
                <div class="popoverHeight"  slot="reference">
                  <div v-for="(item, index) in row.detail" :key="item.id" class="flex mb-4">
                    <span v-if="index<3">{{ item.reward_type === 'gift' ? '礼物奖励：' : item.reward_type === 'debris' ? '碎片奖励：' : '装扮奖励：' }}</span>
                    <div v-if="index<3">{{ item.title }} {{ item.reward_type === 'product' ? '* ' + item.count+'天' : '' }} * {{ item.draw_count }}</div>
                  </div>
                </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="奖励价值" prop="output"></el-table-column>
        <el-table-column label="抽奖时间" prop="time"></el-table-column>
      </el-table>
      <cus-pagination
        :limit.sync="listQuery.perPage"
        :page.sync="listQuery.page"
        :total="total"
        @pagination="getStatistic"
      />
    </el-card>
  </div>
</template>
<script>
import { userGradeExport } from "@/api/order/dataStatistics";
import { poolDrawList, poolStatistics, poolDrawExport } from "@/api/sunGame/sunGame";
import { statisticsMallSerialTotal } from "@/api/dataPanel/financial";

export default {
  data() {
    return {
      userInput: undefined,
      userOutinput: undefined,
      userRatio: undefined,
      singleDraws: undefined,
      tenDraws: undefined,
      hundredDraws: undefined,
      all_price: undefined,
      all_proportion: undefined,
      listQuery: {
        start_time: undefined,
        end_time: undefined,
        user_code: undefined,
        page:  undefined,
        perPage:  undefined,
        total:  undefined,
      },
      total: 0,
      listQuery2: {
        start_time: undefined,
        end_time: undefined,
      },
      gradelist: [],
      serial_total: undefined,
      user_reg_total: undefined,
      recharge_total: undefined,
      withdraw_total: undefined,
      withdraw_total_audit: undefined,
      withdraw_check_total: "",
      tableData: [],
      loading: false
    };
  },
  created() {
    this.getPoolStatistics()
    this.getStatistic();
    // this.zeroTime()
    // this.HXtimeSlotChange('本周')
    // this.HXtimeSlotChange('本月')
    
  },
  methods: {
    HXtimeSlotChange(val) {
        let startTime, endTime;
        let now = new Date(); //当前日期
        var nowDayOfWeek = now.getDay() - 1; //今天本周的第几天
        var nowDay = now.getDate(); //当前日
        let nowMonth = now.getMonth(); //当前月
        let nowYear = now.getFullYear(); //当前年
        let jd=Math.ceil((nowMonth + 1) / 3);
        console.log('now',now)
        switch (val) {
            case "本周":
                startTime = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
                endTime = new Date(nowYear, nowMonth, nowDay + (6 - nowDayOfWeek))
                break;
            case "本月":
                startTime = new Date(nowYear, nowMonth, 1)
                endTime = new Date(nowYear, nowMonth + 1, 0)
                break;
            case "本季度":
                startTime = new Date(nowYear, (jd-1)*3, 1)
                endTime = new Date(nowYear, jd*3, 0)
                break
            case "本年":
                startTime = new Date(nowYear, 0, 1)
                endTime = new Date(nowYear, nowMonth, nowDay)
                break
        }
        //格式化日期：yyyy-MM-dd
        const formatDate = (date) => {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();
            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return (myyear + "-" + mymonth + "-" + myweekday);
        }
        return [this.formatDate(startTime),this.formatDate(endTime)]
        // console.log(formatDate(startTime),formatDate(endTime))
    },
    formatDate(date) {
        var myyear = date.getFullYear();
        var mymonth = date.getMonth() + 1;
        var myweekday = date.getDate();
        if (mymonth < 10) {
            mymonth = "0" + mymonth;
        }
        if (myweekday < 10) {
            myweekday = "0" + myweekday;
        }
        return (myyear + "-" + mymonth + "-" + myweekday);
    },

    // 获取今天零时的时间
    zeroTime(){
        let date = new Date();
        let y = date.getFullYear();
        let m = date.getMonth()+1;
        let d = date.getDate();
        const ddd = y+'-'+this.add0(m)+'-'+this.add0(d)+' '+'00:00:00'
        // return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+'00:00:00';
        return y+'-'+this.add0(m)+'-'+this.add0(d);
    },
    // 自动补零函数
    add0(m){
        return m<10?'0'+m:m
    },
    handleTime(n) {
      if(n === '今天') {
        this.listQuery.start_time = this.zeroTime() + ' 00:00:00'
        this.listQuery.end_time = this.zeroTime() + ' 23:59:59'
      }
      if(n === '本周') {
        this.listQuery.start_time = this.HXtimeSlotChange('本周')[0] + ' 00:00:00'
        this.listQuery.end_time = this.HXtimeSlotChange('本周')[1] + ' 23:59:59'
      }
      if(n === '本月') {
        this.listQuery.start_time = this.HXtimeSlotChange('本月')[0] + ' 00:00:00'
        this.listQuery.end_time = this.HXtimeSlotChange('本月')[1] + ' 23:59:59'
      }
      
      this.getStatistic()
    },
    getStatistic() {
      if (this.listQuery.start_time > this.listQuery.end_time) {
        this.$message.warning("请选择正确的日期范围");
        return;
      }
      for (let key in this.listQuery) {
        this.listQuery[key] = !this.listQuery[key] ? undefined : this.listQuery[key]
      }
      poolDrawList(this.listQuery).then(res => {
        if(res.code === 200) {
          this.tableData = res.data.list
          this.total = res.data.meta.total
        }
      });
    },
    getPoolStatistics() {
      if (this.listQuery2.start_time > this.listQuery2.end_time) {
        this.$message.warning("请选择正确的日期范围");
        return;
      }
      for (let key in this.listQuery2) {
        this.listQuery2[key] = !this.listQuery2[key] ? undefined : this.listQuery2[key]
      }
      poolStatistics(this.listQuery2).then(res => {
        if(res.code === 200) {
          this.userInput = res.data.total_input
          this.userOutinput = res.data.total_output
          this.userRatio = res.data.proportion
          this.singleDraws = res.data.one
          this.tenDraws = res.data.ten
          this.hundredDraws = res.data.hundred
          this.all_price = res.data.all_price
          this.all_proportion = res.data.all_proportion
        }
      });
    },
    handleExcel() {
      let data = {
        start_time: this.listQuery.start_time,
        end_time: this.listQuery.end_time,
        user_code: this.listQuery.user_code
      };
      poolDrawExport(data).then(res => {
        location.href = res.data.download_url;
      });
    },
    handleReset() {
      this.listQuery = {
        start_time: undefined,
        end_time: undefined,
        user_code: undefined
      }
      this.getStatistic()
    },
    handleReset2() {
      this.listQuery2 = {
        start_time: undefined,
        end_time: undefined
      }
      this.getPoolStatistics()
    },
  }
};
</script>
<style scoped>

::v-deep {
  .el-table {
    .cell {
      flex-direction: column;
    }
  }
}
.text {
  font-size: 14px;
}

.item {
  padding: 0;
}

#box-card {
  width: 480px;
  margin: 0 4px;
}

.center {
  display: flex;
  flex-direction: row;
}

.coin {
  font-size: 12px;
  background: rgb(28, 138, 241);
  color: #fff;
  width: 30px;
  margin-left: 5px;
  display: inline-block;
  text-align: center;
}
.popoverHeight {
  height: 100px;
  overflow: hidden;
}

</style>
